<template>
  <div>
    <div>
      <!-- 操作按钮 -->
       <el-row class="m-b">
         <el-button type="primary" size="small" @click="updateUser()">
           <i class="el-icon-user"></i>
           更新用户
         </el-button>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card>
            <el-tag type="info" effect="plain">管理员</el-tag>
            <el-table stripe :data="owners" style="width: 100%; font-size: 14px; height:350px;" size="mini">
              <el-table-column prop="name" label="用户名" min-width="140" sortable />
              <el-table-column prop="displayName" label="昵称" min-width="140"/>
              <el-table-column prop="email" label="邮箱" min-width="200" show-overflow-tooltip />
              <el-table-column prop="state" label="状态" min-width="100">
                <template #default="{ row }">
                  <el-tag :type="row.state | stateFilter">{{ row.state | stateFil}}</el-tag>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <el-tag type="info" effect="plain">普通用户</el-tag>
            <el-table stripe :data="customers" style="width: 100%; font-size: 14px; height:350px;" size="mini">
              <el-table-column prop="name" label="用户名" min-width="140" sortable />
              <el-table-column prop="displayName" label="别名" min-width="140"/>
              <el-table-column prop="email" label="邮箱" min-width="200" show-overflow-tooltip />
              <el-table-column prop="state" label="状态" min-width="100">
                <template #default="{ row }">
                  <el-tag :type="row.state | stateFilter">{{ row.state | stateFil}}</el-tag>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>

      <!-- <div class="pages-btn-box m-t">
        <el-pagination
          :current-page="page.current"
          :page-size="Number(page.size)"
          layout="prev, pager, next, jumper"
          :total="Number(page.total)"
          @current-change="handleCurrentChange"
        />
      </div>-->

    </div>
    <edit-form :show-dialog="showDialog" :form-data="formData" :owner-names="ownerNames" :customer-names="customerNames" @changeVisible="changeVisible" @getList="getList"/>
  </div>
</template>
<script>
import editForm from "@/views/viewProject/components/member/updateUser";
import { userList } from "@/api/projectManage";
export default {
  components: {
    editForm
  },
  data() {
    return {
      tableData: [{}],
      page: {
        current: 1,
        size: 10,
        total: 1
      },
      showDialog: false,
      formData: {},
      projectId: "",
      owners: [],
      ownerNames: [],
      customers: [],
      customerNames: []
    };
  },
  filters: {
    stateFil(val) {
      switch (val) {
        case "NEW":
          return "新注册";
        case "ACTIVE":
          return "激活";
        case "DISABLE":
          return "禁用";
        default:
          break;
      }
    },
    stateFilter(state) {
      const stateMap = {
        ACTIVE: "success",
        DISABLE: "danger",
        NEW: ""
      };
      return stateMap[state];
    }
  },
  mounted() {
    this.projectId = this.$route.query.projectId;
    this.getList();
  },
  methods: {
    getList() {
      userList(this.projectId).then(res => {
        this.customers = res.value.customers;
        this.owners = res.value.owners;
        for (let i = 0; i < res.value.owners.length; i++) {
          this.ownerNames[i] = res.value.owners[i].name;
        }
        for (let i = 0; i < res.value.customers.length; i++) {
          this.customerNames[i] = res.value.customers[i].name;
        }
      });
    },
    changeVisible(e) {
      this.showDialog = e;
    },
    handleCurrentChange(val) {
      this.page.current = val;
      this.getList();
    },
    updateUser() {
      this.changeVisible(true);
    },
    exportFun() {},
    delFun() {}
  }
};
</script>
<style lang="scss" scoped></style>
